<template>
  <div>
    <t-drawer :visible="props.visible" size="medium" header="支付配置" :footer="null" @close="closeDrawer">
      <t-form ref="paymentEditForm" :data="formData" :rules="FORM_RULES" @reset="onReset" @submit="onSubmit">
        <t-form-item label="支付渠道" name="payChannel">
          <t-space>
            <t-radio-group
              v-model="formData.paymentChannel"
              :default-value="0"
              allow-uncheck
              name="paymentChannel"
              :options="PAYMENT_CHANNEL_OPTIONS"
            ></t-radio-group>
          </t-space>
        </t-form-item>
        <t-form-item label="支付场景" name="paymentScene">
          <t-space>
            <t-radio-group
              v-model="formData.paymentScene"
              :default-value="0"
              allow-uncheck
              name="paymentChannel"
              :options="PAYMENT_SCENE_OPTIONS"
            ></t-radio-group>
          </t-space>
        </t-form-item>
        <t-form-item label="应用ID" name="appId">
          <t-input v-model="formData.appId"></t-input>
          <t-tooltip placement="left" content="第三方支付分配的应用id">
            <t-icon slot="statusIcon" name="help-circle" size="20px" style="color: #0006" />
          </t-tooltip>
        </t-form-item>

        <t-form-item label="商户号" name="mchId">
          <t-input v-model="formData.mchId"></t-input>
          <t-tooltip placement="left" content="第三方支付分配的商户号">
            <t-icon slot="statusIcon" name="help-circle" size="20px" style="color: #0006" />
          </t-tooltip>
        </t-form-item>

        <t-form-item label="描述" name="description">
          <t-textarea v-model="formData.description" placeholder="请输入内容" :autosize="{ minRows: 2, maxRows: 3 }" />
          <t-tooltip placement="left" content="应用描述">
            <t-icon slot="statusIcon" name="help-circle" size="20px" style="color: #0006" />
          </t-tooltip>
        </t-form-item>

        <t-form-item>
          <t-space>
            <t-button @click="visibleDialog = true"
              ><template #icon><save-icon /></template> 保存配置</t-button
            >
            <t-button theme="default" variant="base" type="reset">重置</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </t-drawer>

    <t-dialog v-model:visible="visibleDialog" width="270" header="提示" @confirm="save"> 确定要保存信息吗？ </t-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
import { SaveIcon } from 'tdesign-icons-vue-next';

import { MessagePlugin } from 'tdesign-vue-next';
import { INITIAL_DATA, FORM_RULES, PAYMENT_CHANNEL_OPTIONS, PAYMENT_SCENE_OPTIONS } from '../constants';
import { getApp, saveApp } from '@/api/settings';
import { AppInfoEditDto } from '@/api/model/settingsModel';

const props = defineProps({
  visible: {
    type: Boolean,
  },
  appId: {
    type: String,
  },
});

const emit = defineEmits(['onClose', 'onSave']);
const closeDrawer = () => {
  emit('onClose');
};
const visibleDialog = ref(false);

const formData = ref<AppInfoEditDto>({ ...INITIAL_DATA });

const onReset = () => {};
const visibleConfirm = ref(false);
const onSubmit = ({ validateResult }) => {
  if (validateResult === true) {
    visibleConfirm.value = true;
  }
};
const save = () => {
  saveApp(formData.value)
    .then((ret) => {
      emit('onSave');
      MessagePlugin.success('保存成功');
    })
    .catch((e) => {
      showErrMessage(e);
    });
  visibleDialog.value = false;
};

const featchData = () => {
  if (props.appId === '' || props.appId === undefined) {
    formData.value = { ...INITIAL_DATA };
  } else {
    getApp(props.appId).then((ret) => {
      console.log('payment', JSON.stringify(ret));
      formData.value = ret;
    });
  }
};

const showErrMessage = (e: any) => {
  MessagePlugin.error(e.message);
};

onMounted(() => {
  featchData();
});
watch(
  () => props.appId,
  (newVal, oldVal) => {
    featchData();
  },
);
</script>

<style></style>
